<template>
  <div class="box">
    <span class="time">{{ time?.format("HH:mm:ss") }}</span>
    <div class="divider" />
    <div class="date">
      <span>{{ time?.format("dddd") }}</span>
      <span>{{ time?.format("YYYY-MM-DD") }}</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from "vue";
import dayjs from "dayjs";
import { timerFun } from "@/utils/timer.js";

const time = ref();

let timer;
onMounted(() => {
  const setTimer = () => {
    time.value = dayjs();
  };
  timerFun(setTimer, 1000, (id) => {
    timer = id;
  });
});

onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
  }
});
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 1rem;

  .divider {
    width: 1px;
    background-color: #fff;
    margin: 0 1rem;
    height: 1.5rem;
  }

  .date {
    display: inline-flex;
    flex-direction: column;
    font-size: 0.75rem;

    &>span {
      line-height: normal;
    }
  }

  .time {
    font-size: 1.5em;
    font-weight: 300;
  }
}
</style>
